<div class="bg-light lter b-b wrapper-md">
	<h1 class="m-n font-thin h3">
		<span class="font-bold" translate="aside.nav.analysis.patient">Patient Data</span>
	</h1>
</div>
<div class="wrapper-md">
<tabset class="tab-container">
<tab heading="图型demo">
            
	<div ng-controller="FlotChartDemoCtrl">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						<span class="font-bold" translate="analysis.chartTitle">Patient
							visitors(unit W)</span>
					</div>
					<div class="panel-body">
						<div ui-jq="plot"
							ui-options="
	              [
	                { data: {{d}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 } }
	              ], 
	              {
	                colors: ['{{app.color.info}}'],
	                series: { shadowSize: 3 },
	                xaxis:{ 
	                  font: { color: '#000' },
	                  position: 'bottom',
	                  ticks: [
	                    [ 1, 'Jan' ], [ 2, 'Feb' ], [ 3, 'Mar' ], [ 4, 'Apr' ], [ 5, 'May' ], [ 6, 'Jun' ], [ 7, 'Jul' ], [ 8, 'Aug' ], [ 9, 'Sep' ], [ 10, 'Oct' ], [ 11, 'Nov' ], [ 12, 'Dec' ]
	                  ]
	                },
	                yaxis:{ font: { color: '#000' } },
	                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
	                tooltip: true,
	                tooltipOpts: { content: '%x is %y',  defaultTheme: false, shifts: { x: 0, y: 20 } }
	              }
	            "
							style="height: 340px"></div>
					</div>
				</div>
			</div>

			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading font-bold">User Type</div>
					<div class="panel-body">
						<div ui-jq="plot"
							ui-options="
              [ 
                { label: 'New User', data: {{d1_1}} },
                { label: 'User', data: {{d1_2}} },
                { label: 'Doctor', data: {{d1_3}} }
              ],
              {
                bars: { show: true, fill: true, lineWidth: 1, order: 1, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] } },
                colors: ['{{app.color.info}}', '{{app.color.success}}', '{{app.color.primary}}'],
                series: { shadowSize: 1 },
                xaxis:{ font: { color: '#ccc' },
                	ticks: [
	                    [ 10, 'Q1th' ], [ 20, 'Q2nd' ], [ 30, 'Q3rd' ], [ 40, 'Q4th' ]
	                  ]
	            },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },                
                tooltip: true
              }
            "
							style="height: 340px"></div>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading font-bold">User Role</div>
					<div class="panel-body">
						<div ui-jq="plot"
							ui-options="
		              {{d3}},
		              {
		                series: { pie: { show: true, innerRadius: 0.5, stroke: { width: 0 }, label: { show: true, threshold: 0.05 } } },
		                colors: ['{{app.color.primary}}','{{app.color.info}}','{{app.color.success}}','{{app.color.warning}}','{{app.color.danger}}','{{app.color.dark}}','#ea11ea'],
		                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },   
		                tooltip: true,
		                tooltipOpts: { content: '%s: %p.0%' }
		              }
		            "
							style="height: 240px"></div>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading font-bold">User Type</div>
					<div class="panel-body text-center">
						<div ng-init="data1=[20,50,30]" ui-jq="sparkline"
							ui-options="{{data1}}, {type:'pie', height:154, sliceColors:['{{app.color.warning}}','{{app.color.info}}','{{app.color.danger}}']}"
							class="sparkline inline" style="height: 200px"></div>
						<div class="line pull-in"></div>
						<div class="text-xs">
							<i class="fa fa-circle text-warning"></i> New User 20% 
							<i class="fa fa-circle text-info"></i> User 50% 
							<i class="fa fa-circle text-danger"></i> Doctor 30%
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</tab>

<tab heading="table filter demo">
	<div class="panel-body">
          <div class="table-responsive">
              <table ui-jq="dataTable" ui-options="dtOptions" class="table table-striped m-b-none" ng-init="getHospitals()">
                  <thead>
                  <tr>
                      <th style="width:20%"><span class="font-bold" translate="common.id">Id</span></th>
                      <th style="width:25%"><span class="font-bold" translate="common.name">Name</span></th>
                      <th style="width:15%">
						<select class="form-control" ng-change="selectXX()" ng-model="selectVal">
							<option value="西">{{ (selectLang == "English") ? "All" : "西青区" }}</option>
		                    <option value="上海">{{ (selectLang == "English") ? "Not certified" : "上海市" }}</option>
		                </select>
					  </th>
                      <th style="width:15%"><span class="font-bold" translate="user.city">City</span></th>
                      <th style="width:15%"><span class="font-bold" translate="common.operate"></span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr ng-repeat="hos in ArrHospital">
                      <td>{{ hos.hosp_Id }}</td>
                      <td>{{ (selectLang == 'English') ? hos.hosp_En_Name : hos.hosp_Cn_Name }}   <em ng-show="hos.isOpeCenter==true" class="fa fa-info-circle"></em> </td>
                      <td>{{ (selectLang == 'English') ? hos._province.local_En_Name : hos._province.loca_Cn_Name }}</td>
                      <td>{{ (selectLang == 'English') ? hos._city.loca_En_Name : hos._city.loca_Cn_Name}}</td>
                      <td>
                          <div>
                              <script type="text/ng-template" id="myModalContent.html">
                                  <div ng-include="'views/work/basic_hospital_detail.html'"></div>
                              </script>
                              <button type="button" ng-hide = "hos.isOpeCenter == true" ng-click="assignOpeCent(hos)" class="btn btn-sm btn-info">
                                  <em class="fa fa-info-circle"></em> {{ 'business.hosp.assignOpeCent' | translate }}
                              </button>
                              <button type="button" ng-click="editHospital({ templateUrl: 'myModalContent.html' }, hos)" class="btn btn-sm btn-warning">
                                  <em class="fa fa-edit"></em>
                              </button>
                              <!--
                              <button type="button" ng-click="deleteHospital(hos)" class="btn btn-sm btn-danger">
                                  <em class="fa fa-trash"></em>
                              </button>
                              -->
                          </div>
                      </td>
                  </tr>
                  </tbody>
              </table>
          </div>
    </div>
</tab>

</tabset>

</div>